<pro-header [title]="'用户管理'"></pro-header>
<nz-card [nzBordered]="false">
    <form nz-form (ngSubmit)="getData()" [nzLayout]="'inline'">
        <div nz-row [nzGutter]="24">
            <!-- <div nz-col [nzSpan]="8" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-form-label><label for="no">规则编号</label></div>
                            <div nz-form-control class="flex-1">
                                <nz-input [(ngModel)]="q.no" name="no" [nzSize]="'large'" [nzPlaceHolder]="'请输入'" nzId="no"></nz-input>
                            </div>
                        </div>
                    </div> -->
            <!-- <div nz-col [nzSpan]="8" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-form-label><label for="status">使用状态</label></div>
                            <div nz-form-control class="flex-1">
                                <nz-select [(ngModel)]="q.status" name="status" nzId="status" [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" [nzSize]="'large'">
                                    <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
                                </nz-select>
                            </div>
                        </div>
                    </div>
                    <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-form-label><label for="callNo">调用次数</label></div>
                            <div nz-form-control class="flex-1">
                                <nz-input [nzSize]="'large'" nzId="callNo"></nz-input>
                            </div>
                        </div>
                    </div>
                    <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-form-label><label for="updatedAt">更新日期</label></div>
                            <div nz-form-control class="flex-1">
                                <nz-datepicker [nzSize]="'large'" [nzPlaceHolder]="'请输入更新日期'" nzId="updatedAt" class="d-block"></nz-datepicker>
                            </div>
                        </div>
                    </div>
                    <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-form-label><label for="status2">使用状态</label></div>
                            <div nz-form-control class="flex-1">
                                <nz-select [nzPlaceHolder]="'请选择'" nzId="status2" [nzShowSearch]="true" [nzSize]="'large'">
                                    <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
                                </nz-select>
                            </div>
                        </div>
                    </div>
                    <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                        <div nz-form-item class="d-flex">
                            <div nz-form-label><label for="status3">使用状态</label></div>
                            <div nz-form-control class="flex-1">
                                <nz-select [nzPlaceHolder]="'请选择'" nzId="status3" [nzShowSearch]="true" [nzSize]="'large'">
                                    <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
                                </nz-select>
                            </div>
                        </div>
                    </div>
                    <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                        <button nz-button type="reset" (click)="getData()" [nzSize]="'large'" class="mx-sm">重置</button>
                        <a (click)="expandForm=!expandForm">
                            {{expandForm ? '收起' : '展开'}}
                            <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                        </a>
                    </div> -->
        </div>
    </form>
    <div class="mb-md">
        <button nz-button (click)="add()" [nzType]="'primary'" [nzSize]="'large'">
            <i class="anticon anticon-plus"></i>
            <span>新建</span>
        </button>
        <ng-container *ngIf="selectedRows.length > 0">
            <nz-dropdown [nzPlacement]="'bottomLeft'">
                <button nz-button nz-dropdown [nzSize]="'large'">
                    批量操作
                    <i class="anticon anticon-down"></i>
                </button>
                <ul nz-menu>
                    <li nz-menu-item (click)="remove()">删除</li>
                    <li nz-menu-item (click)="approval()">审批</li>
                </ul>
            </nz-dropdown>
        </ng-container>
    </div>

    <nz-table #nzTable [nzAjaxData]="_dataSet" [nzTotal]="total">
        <thead nz-thead>
            <tr>
                <th nz-th>
                    <span>编号</span>
                </th>
                <th nz-th>
                    <span>账号</span>
                </th>
                <th nz-th>
                    <span>操作</span>
                </th>
            </tr>
        </thead>
        <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                <td nz-td>{{data.id}}</td>
                <td nz-td>{{data.account}}</td>
                <td nz-td>
                    <nz-popconfirm [nzTitle]="'确认删除吗？'" (nzOnConfirm)="del(data)">
                        <a nz-popconfirm >删除</a>
                    </nz-popconfirm>
                </td>
            </tr>
        </tbody>
    </nz-table>

</nz-card>

<nz-modal [nzVisible]="modalVisible" [nzTitle]="'新建用户'" [nzConfirmLoading]="loading" [nzContent]="modalContent" (nzOnCancel)="modalVisible=false"
    (nzOnOk)="save()">
    <ng-template #modalContent>
        <div nz-form-item class="d-flex">
            <div nz-form-label>
                <label for="account">用户名</label>
            </div>
            <div nz-form-control class="flex-1">
                <nz-input [(ngModel)]="user.account" name="account" [nzSize]="'large'" [nzPlaceHolder]="'请输入'" nzId="account"></nz-input>
            </div>
        </div>
        <div nz-form-item class="d-flex">
            <div nz-form-label>
                <label for="password">密码</label>
            </div>
            <div nz-form-control class="flex-1">
                <nz-input [nzType]="'password'" [(ngModel)]="user.password" name="password" [nzSize]="'large'" [nzPlaceHolder]="'请输入'" nzId="password"></nz-input>
            </div>
        </div>
    </ng-template>
</nz-modal>